<template>
    <el-tooltip content="添加班课" placement="top">

        <el-button link type="primary" size="large" @click="handleClickJoinCourseButton">
            <svg t="1713084264836" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4910" width="24" height="24"><path d="M448 448H192v128h256v256h128V576h256V448H576V192H448v256z m64 576A512 512 0 1 1 512 0a512 512 0 0 1 0 1024z" fill="#1296db" p-id="4911"></path></svg>
        </el-button>
    </el-tooltip>
    <Layer :layer="layer" v-if="layer.show" />

</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import { LayerInterface } from "@/components/layer/index.vue";
import Layer from "./layer.vue";
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import { ElButton } from 'element-plus'
import { CirclePlusFilled } from '@element-plus/icons'
export default defineComponent({
    components: {
        CirclePlusFilled,
        Layer,
    },
    setup() {
        const layer: LayerInterface = reactive({
            show: false,
            title: "添加班课",
        });
        const router = useRouter()

        const handleCreateCourse = () => {
            router.push('/teacher/createCourse');
        }
        const handleClickJoinCourseButton = () => {
            console.log('点击了加入课程按钮')
            layer.show = true;
        }
        return {
            layer,
            CirclePlusFilled,
            handleCreateCourse,
            handleClickJoinCourseButton,

        }
    }
})
</script>

<style lang="scss" scoped>
.circle-add-icon {
    width: 30px;
    height: 30px;
    color: #409eff;
    margin-right: 10px;
    margin-left: 10px;
}
</style>